<script setup>
const props = defineProps({
  treeList: {
    type: Array,
    required: false,
    default: []
  }
})

const emits = defineEmits(['toPage'])

// toPage 打开页面
const toPage = (item) => {
  if(props.treeList) {
    props.treeList.forEach(child => {
      child.actived = false
      if(child.children && child.children.length>0) {
        child.children.forEach(cur => {
          cur.actived = false
        })
      }
    })
  }
  item.actived = true
  if(item.url && item.url!=='') {
    emits('toPage', item)
  } else {
    item.checked = !item.checked
    item.icon = item.checked ? 'chevron_right' : 'chevron_down'
  }
}
</script>

<template>
  <div>
    <div v-for="menuItem in treeList" :key="menuItem.modId" class="mt-a">
      <div @click="toPage(menuItem)" :class="[menuItem.actived ? 'mt-b' : 'mt-c', menuItem.children && menuItem.children.length>0 ? 'mt-e' : '']">{{menuItem.modName}} <i v-if="menuItem.children && menuItem.children.length>0" :class="['iconfont', menuItem.icon, 'mt-d']"></i></div>
      <menu-tree v-if="menuItem.children && menuItem.children.length>0" v-show="!menuItem.checked" :treeList="menuItem.children" @toPage="toPage"></menu-tree>
    </div>
  </div>
</template>

<style scoped>
  .mt-a {position: relative; padding: 0 10px 0 10px; line-height: 40px; color: #333; font-size: 16px; cursor: pointer;}
  .mt-b {padding: 0 5px; background-color: #EEE; color: #000;}
  .mt-c {padding: 0 5px; color: #333;}
  .mt-c:hover {background-color: #EEE; color: #000;}
  .mt-d {position: absolute; right: 15px; font-size: 14px; font-weight: normal;}
  .mt-e {font-weight: bold;}
</style>
